<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="状态">
                <el-select v-model="formInline.region" placeholder="请选择状态">
                    <el-option label="待发布" value="shanghai"></el-option>
                    <el-option label="已发布" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公告标题">
                <el-input v-model="formInline.user" placeholder="请输入公告标题"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="info" @click="onSubmit">查 询</el-button>
                <el-button type="info" @click="onSubmit">重 置</el-button>
            </el-form-item>
        </el-form>
        <el-button type="info" @click="addAnnouncement" size="medium">新 建</el-button>
        <el-table :data="tableData">
            <el-table-column type="index" label="序号" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="state" label="状态">
            </el-table-column>
            <el-table-column prop="AnnouncementTitle" label="公告标题">
            </el-table-column>
            <el-table-column prop="releaseTime" label="发布时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div v-if="scope.row.state == '待发布'">
                        <el-button type="text" size="small">立即发布</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </div>
                    <div v-if="scope.row.state == '已发布'">
                        <el-button type="text" size="small">详情</el-button>
                        <el-button type="text" size="small">取消发布</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
        <el-dialog title="新增" :visible.sync="dialogVisible" width="680px" :before-close="handleClose">
            <div>
                <el-form :inline="true" :model="formInlineDialog" class="demo-form-inline">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="公告标题">
                                <el-input v-model="formInlineDialog.AnnouncementTitle" placeholder="请输入公告标题"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发布时间">
                                <el-date-picker :picker-options="pickerOptions" v-model="formInlineDialog.releaseTime"
                                    type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>


                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentPage: 1,
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7; // 8.64e7 是 1 天的毫秒数
                }
            },
            formInline: {
                user: '',
                region: ''
            },
            tableData: [{
                state: '待发布',
                AnnouncementTitle: '关于空间预约的最新公告',
                releaseTime: '2024-04-25 14:28:15'
            }, {
                state: '已发布',
                AnnouncementTitle: '做好合理利用资源',
                releaseTime: '2024-04-25 14:28:15'
            }, {
                state: '待发布',
                AnnouncementTitle: '关于空间预约的最新公告',
                releaseTime: '2024-04-25 14:28:15'
            }, {
                state: '已发布',
                AnnouncementTitle: '做好合理利用资源',
                releaseTime: '2024-04-25 14:28:15'
            }],
            // 控制弹窗的显示与隐藏
            dialogVisible: false,
            // 新增公告
            formInlineDialog: {
                // 公告标题
                AnnouncementTitle: '',
                // 发布时间
                releaseTime: ''
            }
        }
    },
    methods: {
        // 不足两位数 补0操作
        indexMethod(index) {
            return (index + 1).toString().padStart(2, '0');
        },
        onSubmit() {
            // 去查询携带参数
            console.log('submit!');
        },
        addAnnouncement() {
            this.dialogVisible = true
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleSizeChange() {

        },
        handleCurrentChange() {

        }
    }

}
</script>

<style lang="less" scoped></style>